<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>DOM留言板</title>
<!--autor: carriehuang | QQ:453555909 | 转载需注明原处-->
<head>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .wrap{
            width:1200px;
            height:auto;
            margin: 0 auto;
            font-size: 14px;
            border: 10px solid #c4c4c4;
            padding: 10px;
            position: relative;
        }
        .txt-con{
            width:500px;
        }
        .txt{
        	width:500px;
            height:200px;
            border: 1px dashed #c4c4c4;
            padding: 10px;
        }
        h3{
        	border-bottom: 2px solid #c4c4c4;
        }
        .list {
        	margin: 10px 0;
        	padding:10px;	
        	border: 1px solid #ccc;

        }
      	.list li{
      		padding:10px;	
      		list-style: none;
      	}
      	.del{
      		float: right;
      	}
        a{
            color: #fff;
            display: block;
            width: 100%;
            padding: 10px 0;
            text-decoration: none;
            background-color: #ce8483;
        }
        
    </style>
</head>
<body>
<div class="wrap">
    
    <div class="txt-con">
        <h3>留言内容</h3>
        
        <ul class="list" id="j_list">
        	这里会显示留言内容 ...
        </ul>
        
        <textarea value="" name="import" class="txt" id="j_text"></textarea>
        <input type="button" value="发表留言" id="j_submit"/>
    </div>
</div>


<script type="text/javascript">
/*
 * DOM： document object model 文档对象模型，是指浏览器提供一些API对文档节点进行操作
 ** 节点类型
 * 元素节点：1
 * 文本节点：3
 * 文档节点（document）:9
 * 注释节点：8 
 * 属性节点：2，使用attributes获取属性节点
 * 
 ** 查找节点
 * childNodes ：找到元素下所有节点
 * children：找到元素所有元素节点
 * parentNode: 查找某个元素的父节点
 * nextElementSibling: 查找某个元素的下个兄弟节点
 * previousElementSibling: 查找某个元素的上个兄弟节点
 * firstElementChild 某个元素里的第一个子节点
 * lastElementChild 某个元素里的最后一个子节点
 * 
 ** 元素的操作
 * createElement()：创建一个元素
 * appendChild()：插入元素，向节点里面添加一个子节点，是在最末尾添加
 * inserBefore(childNode1,childNode2)：往一个节点的指定子节点前边插入一个节点 ，childNode1插入到childNode2前边
 * removeChild()：从一个节点中删除指定节点
 * replaceChlid(childNode1,childNode2)：替换节点，childNode1替换掉childNode2
 * cloneNode(boolean)：克隆一个节点，true :克隆元素节点包含子节点， false：克隆元素节点不包含子节点
 * */
    window.onload=function(){
        var oSubmit = document.getElementById("j_submit");
        var oText = document.getElementById("j_text");
        var oList = document.getElementById("j_list");
     	var oDel = document.getElementsByClassName("del");
        var num = 0;
        oSubmit.onclick = function(){
       		//console.log(oList.childNodes[0].nodeValue);
       		if(oText.value==""){
       			alert("请输入内容");
       		}else{
       			var attrLi = document.createElement("li");
	        		oList.childNodes[0].nodeValue=""; 
	        		attrLi.innerHTML = num+"、"+oText.value+'<input class="del" type="button" value="删除" />';
	        		oList.appendChild(attrLi);
	        		oText.value="";
	        		num++;
       		}

        	for(var i=0;i<oDel.length;i++){
        		oDel[i].onclick = function(){
        			console.log(this.parentNode);
        			oList.removeChild(this.parentNode);//console.log(oList.childNodes[i]);
               			
        		}
        	}
        }
        
       
    }
</script>
</body>

</html>
